<template>
  <div
    class="diy-banner"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
    >
      <template v-for="(banner, index) in diyItem.data" :key="index">
        <div class="banner-item-img" v-if="index <= 1">
          <img
            :src="
              banner.img || $utils.staticImgPath('diy/banner.png', 'static')
            "
            alt=""
            :style="{ borderRadius: diyItem.style.radius + 'px' }"
          />
        </div>
      </template>
      <div
        class="banner-dot"
        :style="{ bottom: 'calc(' + diyItem.style.pt + 'px + 10px)' }"
      >
        <div></div>
        <div class="active"></div>
        <div></div>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts">
export default {
  name: "storeDiyPreviewBanner",
};
</script>
  <script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import { diyBannerDataType } from "@/types";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyBannerDataType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          radius: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
    index: 0,
  }
);
</script>


<style scoped>
/*图片轮播*/
.diy-banner {
  display: block;
  margin: 0;
  overflow: hidden;
}
.diy-banner .banner-item-img {
  display: none;
  width: 100%;
  margin: 0 auto;
}
.diy-banner .banner-item-img img {
  width: 100%;
  display: block;
}
.diy-banner .banner-item-img:first-child {
  display: block;
}
.diy-banner .banner-dot {
  position: absolute;
  width: 60px;
  bottom: 12px;
  right: calc(50% - 30px);
  display: flex;
  justify-content: space-around;
}
.diy-banner .banner-dot > div {
  height: 5px;
  width: 5px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.diy-banner .banner-dot > div.active {
  background: var(--base-default);
  width: 10px;
}
</style>